<template>
  <div>
    <h1 :num="10" :flag="true">路由传参</h1>
    <router-link :to="{name:'commone'}">
      第一个组件
    </router-link>
    <router-link :to="{name:'commtwo'}">
      第二个组件
    </router-link>
    <!-- router-view是动态加载children内的子组件 -->
    <router-view />

    <commonThree>

      <!-- 给默认插槽的内容 -->

      <template>
        <div>
          <h1 style="color:red;">我是父组件传递的内容</h1>
          <el-button>取消</el-button>
        </div>
      </template>
      <template #header>
        <div>
          <h1 style="color:blue;">我是头部信息</h1>
        </div>
      </template>
      <template #footer>
        <div>
          <h1 style="color:green;">我是脚步信息</h1>
        </div>
      </template>
      <!-- 默认插槽 #default="{row}" -->
      <template #content="{user}">
        <div>
          <h1 style="color:darkmagenta;">我是内容信息，作用插槽</h1>
          <h1>{{ user.name }}</h1>
        </div>
      </template>
    </commonThree>
    <!-- ref 用来获取dom和子组件的 -->
    <h1 ref="mydom">{{ msg }}</h1>
    <el-button @click="change">改变</el-button>

  </div></template>
<script>
import commonThree from './commonThree.vue'
export default {
  components: { commonThree },
  data() {
    return {
      msg: '你好',
      ydata: '爷爷的数据'
    }
  },
  created() {
    // created 无法操作dom
    // this.$nextTick 如果想在created中操作dom 需要使用nextTick
    this.$nextTick(() => {
      console.log(this.$refs.mydom.innerHTML, '-----')
    })
  },
  provide: { // provide 给后代组件传数据配置项
    myname: '我是爷爷的数据'
  },
  methods: {
    change() {
      this.msg = '你好，世界'
      // vue 特性延迟更新dom 改变完数据不能立即获取最新的dom
      // 所有this.$nextTick()
      this.$nextTick(() => {
        console.log(this.$refs.mydom.innerHTML, '-----')
      })
    }
  }
}
</script>
<style lang="scss">

</style>
